<template>
	<div class="templateHome">
		<tmpHeader :index='1' /> 
		<h2 class="tit">“{{nick}}”公众号</h2>
		<div class="main">
			<p class="title">消息模板编辑</p>
			<!-- 模板 -->
			<div class="content">
				<div class="leftpart contentbox">
					<div class="item" v-for="(item,index) in list.slice(0,15)" :key='index'>
						<span>{{ item.name }}：</span>
						<Input placeholder="模板编号" class="inputtit" v-model="item.template" clearable/>
					</div>
				</div>
				<div class="contentbox">
					<div class="item" v-for="(item,index) in list.slice(15)" :key='index'>
						<span>{{ item.name }}：</span>
						<Input placeholder="模板编号" class="inputtit" v-model="item.template" clearable/>
					</div>
				</div>       
			</div>      
			<!-- 保存 -->
			<div class="buttonbox">
				<Button type="primary" class="btn" @click="save">
					<Icon type="ios-checkmark icon" />保存
				</Button>
				<Button @click="back" class="btn">
					<i class = "iconfont icon-butongyi icon"></i>取消
				</Button>
			</div>
		</div>
	</div>
</template>
<script>
import api from "@/api/commonApi";
import tmpHeader from "../tmpHeader";
import aesUtils from "@/plugins/aes-utils.js";
import store from "@/store";
export default {
	components: {
		tmpHeader
	},
	data() {
		return {
			list: [],
			appid: '',
			nick: '',
			id: ''
		};
	},
	created() {
		this.nick = localStorage.getItem("nick");
		this.editModal = sessionStorage.getItem("editModal");
		let iv = store.state.iv;
		let salt = store.state.salt;
		this.appid = aesUtils.decrypt(salt,iv,"wxAppid",localStorage.getItem("appid"))
		this.id = localStorage.getItem("id");
		console.log(this.id)
		let breadList = [
			{ path: "/index", title: "首页" },
			{
				path: "/index/publicOperation/publicAddress/home",
				title: "公众号运营"
			}
		];
		this.$emit("changeBreadList", breadList);
	},
	mounted() {
		this.loadingData();
	},
	methods: {
		//修改公众号模板
		save() {
			let params = {
				list: this.list,
				appid: this.appid
			}
			this.$axios.post(api.updateManageWxList, params).then(res => {
				if (res.data.code) {
					let ret = res.data;
					this.$Message.info("保存成功");
				} else {
					this.$Message.info("保存失败,请稍候重试");
				}
			});
		},
		// 返回
		back() {
			let pageNo = this.$route.query.pageNo;
			// FUNCTIONJS公用 跳转方法
			this.functionJS.queryNavgationTo(this, "/index/publicOperation/publicAddress/home", {
				pageNo
			});
		},
		//获取公众号模板管理列表
		loadingData() {
			this.$axios
				.post(api.findManageWxList, {
					id: this.id
				})
				.then(res => {
					if (res.data.code) {
						let ret = res.data.object;
						this.list = ret;
					} else {
						this.$Message.info("请求失败,请稍候重试");
					}
			});
		}
	}
};
</script>
<style lang="less" scoped>
.templateHome {
	width: calc(100%);
	padding: 10px 30px;
	margin: 0 auto;
	background: #fff;
	.tit {
		margin: 15px 0;
		font-weight: bold;
		text-align: center;
		color: #333
	}
	.main {
		margin: 20px;
		margin-bottom: 20px;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
		.title {
			font-size: 18px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;         
		}
		.content {
			display: flex;
			margin: 0 auto; 
			.contentbox {
				width: 50%;
			}
			.leftpart {				
				border-right: 1px #999 dashed;
			}
			.inputtit {
				width: 65%;
			}
		}
		.item {
			span {
				display: inline-block;
				width: 180px;
			}
			margin: 10px 30px;
		}
		.buttonbox {
			width: 100%;
			text-align: center;
			margin: 30px 0;
			.btn {
				margin-right: 15px;
				width: 75px;
				height: 35px;
			}
			.icon {
				font-size: 14px;
				margin-right: 5px;
			}
		}
	}
}
</style>
